<template>
	<view class="content">
		<view class="menu-block" v-for="item in list" :key="item.id">
			<view class="title">
				{{item.address}}
			</view>
			<view class="user">
				<view style="display: flex;">
					<view class="username">
						{{item.contacts}}
					</view>
					<view class="phone">
						{{item.phone}}
					</view>
				</view>
				<view class="use" v-if="type" @click="confirm(item)">使用</view>
			</view>
			<view class="line"></view>
			<view class="load">
				<view class="default">
					<image v-if="item.isDefault==1"
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/yesDefault.png">
					</image>
					<image v-if="item.isDefault==2"
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/default.png"
						@click="getDefault(item.id)"></image>
					<view class="default-title">
						默认
					</view>
				</view>
				<view class="btn">
					<view class="delete">
						<image @click="delAddress(item.id)"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/delete.png">
						</image>
						删除
					</view>
					<view class="compile" @click="navigate('/page_other/address/add_address?id='+item.id)">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/compile.png">
						</image>
						编辑
					</view>
				</view>
			</view>
		</view>
		<view class="step" @click="navigate('/page_other/address/add_address')">
			新增地址
		</view>
	</view>
</template>

<script>
	import {
		getUserAddressList,
		delAddress,
		updateDefaultAddress
	} from '@/api/address.js';
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				list: [],
				type: null,
			}
		},
		methods: {
			onChange(e) {
				this.form.score = e.value
			},
			confirm(item) {
				uni.$emit('addressInfo', item)
				uni.navigateBack()
			},
			//设置默认地址
			getDefault(e) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				updateDefaultAddress({
					id: e,
				}).then(() => {
					this.getUserAddressList()
				})
			},
			//删除
			delAddress(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				delAddress({
					id: id,
				}).then(res => {
					this.showToast('删除成功')
					this.getUserAddressList()
				})
			},
			//列表
			getUserAddressList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserAddressList({
					page: 1,
					limit: 10,
				}).then(res => {
					this.list = res.list
				})
			}
		},
		onLoad(e) {
			if (e) {
				this.type = e.type
			}
		},
		onShow() {
			this.getUserAddressList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.content {
		width: 100%;
		padding: 30rpx;

		.step {
			width: 70%;
			height: 100rpx;
			display: flex;
			background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
			color: #fff;
			margin: 40rpx auto;
			border-radius: 60rpx;
			justify-content: center;
			align-items: center;

		}

		.menu-block {
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: normal;
				line-height: 48rpx;
				text-align: justify;
				/* 浏览器可能不支持 */
				letter-spacing: 0em;
				color: #1A1A1A;
				margin-bottom: 26rpx;
			}

			.user {
				display: flex;
				font-size: 28rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0em;
				margin-bottom: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.username {
					margin-right: 20rpx;
				}

				.use {
					text-align: end;
					padding: 6rpx 20rpx;
					border: 1px solid #767676;
					border-radius: 10rpx;
					color: 767676;
				}
			}

			.line {
				width: 100%;
				height: 2rpx;
				background-color: #F7F7F7;
				margin-bottom: 30rpx;
			}

			.load {
				display: flex;
				justify-content: space-between;

				.default {
					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 12rpx;
					}

					.default-title {}
				}

				.btn {
					display: flex;

					.delete {
						color: #767676;
						font-size: 32rpx;
						display: flex;
						margin-right: 20rpx;
						border: 2rpx solid #767676;
						padding: 18rpx 30rpx 14rpx;
						border-radius: 100rpx;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}

					.compile {
						color: #FF2F34;
						font-size: 32rpx;
						display: flex;
						border: 2rpx solid #FF2F34;
						padding: 18rpx 30rpx 14rpx;
						border-radius: 100rpx;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
</style>